<template>
  <view class="container" v-if="!loading">
    <!-- 商家信息 -->
    <view class="header-info">
      <image
        class="portrait"
        @click="goPage('page_user/mine/mine')"
        :src="merchantInfo.merchantLogo"
        mode="aspectFill"
      >
      </image>
      <view class="right-box">
        <view class="name" @click="goPage('page_user/mine/mine')">{{
          merchantInfo.merchantName || "去登录"
        }}</view>
        <view class="operation" v-if="token && flag == 1">
          <view class="operation1"></view>
          <view class="operation2" @tap.stop.prevent="recharge">积分充值</view>
        </view>
      </view>
    </view>
    <!-- 积分/账单 -->
    <view class="integral-bill" v-if="token && flag == 1">
      <view class="integral-bill-item">
        <view class="info">
          <view class="title">我的积分</view>
          <view class="content">{{ merchantInfo.merchantPoints || 0 }}</view>
        </view>
        <image
          class="integral-bill-logo"
          src="/static/images/index/integral.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="integral-bill-item bill">
        <view class="info" @click="goPage('page_account/bill/bill')">
          <view class="title">账单明细</view>
          <view class="content">GO</view>
        </view>
        <image
          class="integral-bill-logo"
          src="/static/images/index/bill.png"
          mode="aspectFill"
        ></image>
      </view>
    </view>
    <view class="homeComponent" v-if="token">
      <newHome :parentMessageList="parentMessageList" :flag="flag" />
    </view>
    <uv-loading-page
      :loading="loading"
      loading-mode="spinner"
    ></uv-loading-page>
  </view>
</template>

<script>
import newHome from "@/components/newHome/newHome.vue";
import { toast } from "@/utils/common";
import { getMerchantInfo, getUserInfo } from "@/common/api.js";
const app = getApp();
export default {
  components: {
    newHome,
  },
  data() {
    return {
      loading: false,
      merchantInfo: {
        merchantLogo:
          "http://jy-nfc.oss-cn-hangzhou.aliyuncs.com/2025/01/23/64e87dd31d0b432d8472d74dc9e7fe97.png",
        merchantName: "",
      },
      token: "",
      flag: "",
      parentMessageList: [
        {
          shopName: "商家信息配置",
          baseList: [
            // {
            //   channelLogo: "/static/images/index/huod.png",
            //   channelName: "发布活动",
            //   url: "page_account/activity/list"
            // },
            {
              channelLogo: "/static/images/index/huod.png",
              channelName: "我的优惠券",
              url: "page_account/coupon/index",
            },
            // {
            //   channelLogo: "/static/images/index/shequn.png",
            //   channelName: "社群配置",
            // },
            {
              channelLogo: "/static/images/index/wx.png",
              channelName: "微信配置",
              url: "page_account/wx_code/wx_code",
            },
            {
              channelLogo: "/static/images/index/wifi.png",
              channelName: "WIFI配置",
              url: "page_account/WIFI/WIFI",
            },
            {
              channelLogo: "/static/images/index/lunbo.png",
              channelName: "轮播图",
              url: "page_account/swiper/swiper",
            },
            // {
            //   channelLogo: "/static/images/index/qudao.png",
            //   channelName: "渠道选择",
            //   url: "page_account/channel/channel",
            // },
            // {
            //   channelLogo: "/static/images/index/kapian.png",
            //   channelName: "卡片定制",
            // },
            {
              channelLogo: "/static/images/index/fuli.png",
              channelName: "福利定制",
              url: "page_account/coupon/list",
            },
          ],
        },
        {
          shopName: "渠道配置",
          baseList: [
            {
              channelLogo: "/static/images/index/meit.png",
              channelName: "美团",
              url: "page_account/channel/deploy?id=美团",
            },
            {
              channelLogo: "/static/images/index/dianp.png",
              channelName: "大众点评",
              url: "page_account/channel/deploy?id=大众点评",
            },
            {
              channelLogo: "/static/images/index/gaod.png",
              channelName: "高德地图",
              url: "page_account/channel/deploy?id=高德地图",
            },
            {
              channelLogo: "/static/images/index/douy.png",
              channelName: "发抖音",
              url: "page_account/channel/deploy?id=抖音",
            },
          ],
        },
      ],
    };
  },
  onPullDownRefresh: function () {
    this.getDate().then(() => {
      uni.stopPullDownRefresh();
    });
  },
  onLoad() {
    this.loading = true;
    this.getDate();
  },
  onShow() {
    this.token = this.$store.state.user.token;
    this.flag = this.$store.state.user.flag;
    this.parentMessageList[0].shopName = this.flag == 1 ? "商家信息配置" : "";
    this.getDate();
  },
  onHide() {},

  methods: {
    goPage(url) {
      if (!this.token) {
        app.navigationTo("page_user/login/login");
        return false;
      }
      app.navigationTo(url);
    },
    recharge(url) {
      toast("暂未开放");
    },
    getDate() {
      let api = this.flag == 1 ? getMerchantInfo : getUserInfo;
      let prom = this.flag == 1 ? null : this.$store.state.user.userId;
      return new Promise((resolve, reject) => {
        api(prom)
          .then((res) => {
            if (res.data) {
              let data = res.data;
              data.merchantLogo = data.imgUrl;
              data.merchantName = data.nickName;
              this.merchantInfo = data;
              this.$store.commit("SET_WX_MINFO", this.merchantInfo);
            }
            this.loading = false;
            resolve();
          })
          .catch((err) => {
            console.log("userInfoerr", err);
          });
      });
    },
  },
};
</script>

<style lang="scss">
.container {
  display: flex;
  width: 100vw;
  min-height: 100vh;
  flex-direction: column;
  padding: 234rpx 18rpx 0;
  box-sizing: border-box;
  background: radial-gradient(
    128% 128% at 95% 0%,
    #d7ceff 0%,
    #bbe1ff 62%,
    #ffffff 95%
  );

  .header-info {
    display: flex;
    align-items: center;
    margin-bottom: 28rpx;

    .portrait {
      width: 144rpx;
      height: 144rpx;
      border-radius: 32rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .right-box {
      height: 144rpx;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 700;
      font-size: 42rpx;
      color: #000000;
      line-height: 64rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .operation {
      display: flex;
      margin-top: 10rpx;

      .operation1 {
        width: 172rpx;
        height: 60rpx;
        background: url("/static/images/index/jichu.png") no-repeat;
        background-size: auto 100%;
        margin-right: 16rpx;
      }

      .operation2 {
        width: 144rpx;
        height: 60rpx;
        background: linear-gradient(180deg, #886ae6 0%, #4635ff 99%);
        border-radius: 48rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 60rpx;
        text-align: center;
      }
    }
  }

  .integral-bill {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .integral-bill-item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 12rpx 32rpx;
      width: 346rpx;
      height: 160rpx;
      background: linear-gradient(308deg, #ece9ff 19%, #ffffff 100%);
      border-radius: 16rpx;

      &.bill {
        background: linear-gradient(308deg, #fff4e6 19%, #ffffff 100%);
      }

      .info {
        width: 50%;

        .title {
          font-weight: 500;
          font-size: 28rpx;
          color: #000000;
          line-height: 28rpx;
          margin-bottom: 16rpx;
        }

        .content {
          font-weight: 700;
          font-size: 40rpx;
          color: #000000;
          line-height: 40rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .integral-bill-logo {
        flex-shrink: 0;
        width: 134rpx;
        height: 136rpx;
        margin-left: 30rpx;
      }
    }
  }
}

.parentMessage {
  padding: 28rpx 20rpx;
  margin: 10rpx 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62) 64%,
    #ffffff 100%
  );
  box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #ffffff;
  border-radius: 20rpx;
  position: relative;
}

.shopName {
  width: 100%;
  font-size: 30rpx;
  font-weight: 500;
  margin-bottom: 48rpx;
}

.grid-item-box {
  position: absolute;
  left: 0;
  right: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 162rpx;
  margin-left: 0rpx;
  margin-right: 0rpx;
  // width: 100%;
  width: 130rpx;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;

  // border: 3rpx solid red;
  // image {
  // 	height: 110rpx;
  // 	width: 128px;
  // }
  .imageView {
    // border: 3rpx solid red;
    height: 110rpx;
    width: 130rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 66rpx;
    width: 100%;
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 500;
    font-size: 24rpx;
    line-height: 44rpx;
    font-style: normal;
    color: #000000;
  }
}

.parent-view {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15rpx;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 40rpx;
  border-radius: 20rpx;
}

.child-view {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 162rpx;
  // width: 100%;
  width: 130rpx;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  // width: calc(25% -10px);
  box-sizing: border-box;
  // border: 3rpx solid red;
  background-color: initial;

  // padding: 10rpx;
}

.text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66rpx;
  width: 100%;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 500;
  font-size: 24rpx;
  line-height: 44rpx;
  font-style: normal;
  color: #000000;
  margin-top: 10rpx;
}
</style>
